/* eslint-disable @typescript-eslint/no-non-null-asserted-optional-chain */
// 批量管理
import { Button, Col, Input, message, Modal, Radio, Row, Spin, Table } from 'antd';
import React, { useState } from 'react';
import type { SpreadingGoodsSeller } from '@/services/device';
import { getSpreadingGoodsSeller } from '@/services/device';
import type { CurrentUser } from 'umi';
import type { ColumnsType } from 'antd/lib/table';

interface SellerSelectModalProps {
  userState?: CurrentUser;
  confirmFn?: Function;
  deviceId?: string;
}

type SellerItem = {
  id: number;
  name: string;
};

const SellerSelectModal: React.FC<SellerSelectModalProps> = (props) => {
  const { userState, confirmFn, deviceId } = props;
  const [show, setShow] = useState(false);
  const [loading, setLoading] = useState(false);
  const [seller, setSeller] = useState<SellerItem[]>([]);
  const [chooseSeller, setChooseSeller] = useState<SellerItem | null>(null);
  const [search, setSearch] = useState(''); // 商户搜索

  // 商户列表
  const sellerColumns: ColumnsType<SellerItem> = [
    {
      title: '商户Id',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: '商户名称',
      dataIndex: 'name',
    },
    {
      title: '选择',
      dataIndex: 'operation',
      render: (_, row) => {
        return (
          <Radio
            key={row.id}
            checked={!!(chooseSeller && chooseSeller.id === row.id)}
            onClick={() => setChooseSeller(row)}
          >
            {chooseSeller && chooseSeller.id === row.id ? '选择' : '未选中'}
          </Radio>
        );
      },
    },
  ];

  // 获取可铺货商户
  const getSeller = async () => {
    setLoading(true);

    const data: SpreadingGoodsSeller = {
      uId: userState?.id!,
      userType: userState?.user_type!,
      token: userState?.token!,
      select: search,
    };
    setChooseSeller(null);
    try {
      const res = await getSpreadingGoodsSeller(data);
      console.log(res);
      if (res.code === 0) {
        setSeller(res.data);
      } else {
        message.error(res.msg);
      }
    } catch (err) {
      message.error('获取失败,请重试!');
    }

    setLoading(false);
  };

  // 修改输入框
  const onChange = (event: any) => {
    event.persist();
    if (event && event.target && event.target.value) {
      const { value } = event.target.value;
      setSearch(value);
    }
  };

  // 确定按钮点击
  const confirm = () => {
      if (!chooseSeller) {
          message.error("请选择商户");
          return;
      }
      setShow(false);
      if (typeof confirmFn === 'function') {
          confirmFn(chooseSeller.id, deviceId);
      }
  }

  return (
    <>
      <a key="a" onClick={() => {
          getSeller();
          setShow(true)
      }}>
        铺货(商户)
      </a>
      <Modal
        visible={show}
        footer={null}
        title="商户列表"
        width={600}
        // onOk={this.handleOk}
        onCancel={() => setShow(false)}
      >
        <Spin spinning={loading}>
          {/* 商户列表 */}
          {/* 搜索 */}
          <Row style={{ marginBottom: 16 }}>
            <Col>
              <Input
                placeholder="请输入搜索商户名称"
                // value={search}
                onChange={onChange}
              ></Input>
            </Col>
            <Col style={{ marginLeft: 8 }}>
              <Button onClick={() => getSeller()}>搜索</Button>
            </Col>
          </Row>
          {/* 设备列表 */}
          <Table
            dataSource={seller}
            columns={sellerColumns}
            scroll={{ x: 'max-content', y: 260 }}
            rowKey={(columns) => columns.id}
          ></Table>
          {/* 底部按钮 */}
          <div style={{ marginTop: 20 }}>
            <Button style={{ marginRight: 8 }} type="primary" onClick={() => confirm()}>
              确认
            </Button>
          </div>
        </Spin>
      </Modal>
    </>
  );
};

export default SellerSelectModal;
